<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>{{movies}}</h2>
        <cpn :message.sync="message" :movies.sync="movies"></cpn>
    </div>
    <script src="vue/vue.js"></script>
    <template id="my-cpn">
        <div>
            <div style="margin: 1em;">
                {{message}}
            </div>
            <div style="margin: 1em;">
                <label for="">
                    <input type="text" name="" id="" v-model="str" value="message" style="padding-left:0.5em ;"> 
                    <button @click="clickd">点击</button>
                </label>
            </div>
            <div style="margin: 1em;">
                <input type="text" name="" id="" v-model="mov" @blur="clicka" style="padding-left:0.5em ;display: inline-block">
            </div>
    </div>
    </template>
    <script>
        /* 父传子：props */
        const cpn={
            template:'#my-cpn',
            //props: ['cmovies'],
            props: {
                //类型限制
                message:String,
                movies:String
                //提供默认值
                // message:{
                //     type:String,//类型
                //     default(){
                //         return ''
                //     },//默认值类型为数组或者对象是必须为函数
                //     required:true,//要求必须传值
                // }
            },
            data(){
                return {
                    str:'',
                    mov:this.movies
                }
            },
            methods:{

                clickd(){
                    //console.log('11'+this.str);
                    if(this.str){
                        this.$emit('update:message',this.str);
                    }
                    
                },
                clicka(){
                    //this.mov = event.target.value;
                    //this.$emit('num2change',this.dnumber2);
                    console.log('123'+";;"+this.mov)
                    if (this.mov){
                       this.$emit('update:movies',this.mov) 
                    }
                    //
                }
                
            }
        }
        const vm=new Vue({
            el:'#app',
            data:{
                message:'Hellow World!',
                movies:'大话西游',
            },
            methods:{
            },
            computed:{},
            components:{
                cpn
            }
        });
    </script>
</body>
</html>